<!--
 * @Author: ZCL
 * @Date: 2020-05-19 10:10:27
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-19 10:10:27
-->
<template>
  <div class="carousel">
    <!-- 轮播图 start -->
    <div>
      <van-swipe class="my-swipe" indicator-color="#0A8EFF" :autoplay="3000">
        <van-swipe-item v-for="(item,index) in assetInfoList.image" :key="index">
          <van-image
            width="292px"
            height="222px"
            class="mb-5"
            :src="item.image_url"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 end -->

    <!-- 轮播图文字 start -->
    <div class="carousel-box">
      <div class="title">{{ assetInfoList.f_name }}</div>
      <div class="btn" @click="getOpenAsset" v-if="assetInfoList.c_stock_limit">
        <p v-if="!isOpen">展开耗材信息 <van-icon name="arrow" /></p>
        <p v-else>收起耗材信息 <van-icon name="arrow-down" /></p>
      </div>
      <div class="btn" @click="getOpenAsset" v-else>
        <p v-if="!isOpen">展开资产信息 <van-icon name="arrow" /></p>
        <p v-else>收起资产信息 <van-icon name="arrow-down" /></p>
      </div>
    </div>
    <!-- 轮播图文字 end -->

    <!-- 资产信息 start -->
    <div class="asset-info" v-show="isOpen">
      <div v-if="assetInfoList.f_code"><p>资产编码: <span>{{ assetInfoList.f_code }}</span></p></div>
      <div v-if="assetInfoList.c_code"><p>耗材编码: <span>{{ assetInfoList.c_code }}</span></p></div>
      <div><p>品牌名称: <span>{{ assetInfoList.f_brand || assetInfoList.c_brand }}</span></p></div>
      <div><p>所属仓库: <span>{{ assetInfoList.wh_name }}</span></p></div>
      <div v-if="assetInfoList.f_supplier"><p>资产来源: <span>{{ assetInfoList.f_supplier }}</span></p></div>
      <div v-if="assetInfoList.c_supplier"><p>供应商: <span>{{ assetInfoList.c_supplier }}</span></p></div>
      <div v-if="assetInfoList.f_specs"><p>资产型号: <span>{{ assetInfoList.f_specs }}</span></p></div>
      <div v-if="assetInfoList.c_specs"><p>耗材型号: <span>{{ assetInfoList.c_specs }}</span></p></div>
      <div v-if="assetInfoList.f_unit"><p>资产单位: <span>{{ assetInfoList.f_unit }}</span></p></div>
      <div v-if="assetInfoList.c_unit"><p>耗材单位: <span>{{ assetInfoList.c_unit }}</span></p></div>
      <div v-if="assetInfoList.f_unit_price"><p>资产单价: <span>{{ assetInfoList.f_unit_price }}</span></p></div>
      <div v-if="assetInfoList.cr_unit_price"><p>耗材单价: <span>{{ assetInfoList.cr_unit_price }}</span></p></div>
      <div><p>采购时间: <span>{{ assetInfoList.f_purchase_date || assetInfoList.c_purchase_date }}</span></p></div>
      <div><p>采购人员: <span>{{ assetInfoList.f_purchase_name || assetInfoList.c_purchase_name }}</span></p></div>
      <div><p>入库时间: <span>{{ assetInfoList.f_storage_date || assetInfoList.c_storage_date }}</span></p></div>
      <div v-if="assetInfoList.f_guarantee_years"><p>保修年限: <span>{{ assetInfoList.f_guarantee_years }}</span></p></div>
      <div v-if="assetInfoList.f_use_years"><p>使用年限: <span>{{ assetInfoList.f_use_years }}</span></p></div>
      <div v-if="assetInfoList.c_stock_limit "><p>库存下限: <span>{{ assetInfoList.c_stock_limit }}</span></p></div>
      <div v-if="assetInfoList.c_stock "><p>库存: <span>{{ assetInfoList.c_stock }}</span></p></div>
    </div>
    <!-- 资产信息 end -->
  </div>
</template>
<script>

export default {
  name: 'Carousel',
  props: {
    assetInfoList: {}
  },
  data () {
    return {
      isOpen: false // 展开资产信息
    };
  },
  methods: {
    // 展开资产信息
    getOpenAsset () {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>
<style lang="scss" scoped>
.carousel {
  // 轮播图
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #fff;
    padding: 30px 40px;
  }
  .carousel-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    .title {
      margin-top: 24px;
      text-align: center;
      color: #101010;
      font-size: 16px;
    }
    .btn {
      font-size: 13px;
      color: #101010;
      border: 1px solid #E1E1E1;
      border-radius: 30px;
      width: 130px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin: 14px 0 24px;
      ::v-deep.van-icon {
        transform: translateY(1px);
      }
    }
  }
  // 资产信息
  .asset-info {
    margin-top: 10px;
    background-color: #fff;
    div {
      padding: 15px;
      border-bottom: 1px solid #f4f5f4;
    }
    p {
      font-size: 14px;
      color: #101010;
    }
    span {
      color: #2D2D2D;
      padding-left: 15px;
    }
  }
}
</style>
